﻿@{
    ViewBag.Title = "Index";
}
<style type="text/css">
    .SliderSize{
        height:320px; width:780px; 
    }
    .sl-selected-action
    {
        cursor:pointer;
        background:none;
        background-color:#d60b0b;        	
        border-right:#FF0000 1px solid;
        font-size:15px;
        color:#FFFFFF;
        font-weight:bold;
        padding:3px 0px 3px 8px;	
        width:20px;
        float:left;
    }
    .sl-deselected-action
    {
        cursor:pointer;
        /*background:url(/Images/SliderActionBorder.gif);
        background-repeat:no-repeat;
        background-position:right top;*/
        border-right:#FF0000 1px solid;
        font-size:15px;
        color:#C4AEAE;        	
        font-weight:bold;
        padding:3px 0px 3px 8px;
        width:20px;
        float:left;        	
    }
    .sl-deselected-action:hover
    {
        background-color:#d60b0b;
        color:#FFFFFF;
    } 
    .sl-play-button {
        background: url(/Content/Images/PlayPause.png) no-repeat scroll 0 0 transparent;
        cursor: pointer;
        height: 18px;
        width: 18px;
    }
    .sl-pause-button {
        background: url(/Content/Images/PlayPause.png) no-repeat scroll -16px 0 transparent;
        cursor: pointer;
        height: 18px;
        width: 16px;
    }
</style>

<h2>Index</h2>
@*<script src="/Scripts/ImageSlider.js" type="text/javascript"></script>*@
<script src="/Scripts/TutulSlider.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
    
    Tutul = {};
    Tutul.myClass = function (name) {
        var self = this;
        this.Name = name;
        this.success = function () {
            this.resize(); //self.resize();
        };
        this.resize = function () {
            alert('Resize Method Called');
        }
    };

    Tutul.ImageSlider = {
        Duration: 100,
        Container: '',
        Success: function () {
            //alert('Success Method Called');
            this.Resize();
        },
        Resize: function () {
            alert('Resize Method Is Called');
        }
    };
    function Call() {
        var obj = new Tutul.myClass('Md. Hassanur Rahman');  //new nameSpace.myClass('Hassanur Rahman'); //new myClassName('This is test name');
        //var slider = new Tutul.ImageSlider();
        //slider.Success();
        //Tutul.ImageSlider.Success();
        //obj.success();

        //alert();
    }
    function ChangeSlide(divElement) {
        var index = $(divElement).html();
        ChangeImage(index - 1);
    }
    $(document).ready(function () {        
        var slider = new TutulTest.ImageSlider('divHidenImageContainer', 'divSliderContainer', 'divImageContainer');
        slider.PlayAnimation(1);        
    });
</script>

<button type="button" value="" onclick="Call();">Call Method</button>

<div id="divSliderContainer" style="height:320px; width:780px;">    	    	                
    <div id="divImageContainer" class="SliderSize" style="background-image: url(/Content/Images/Slider1.jpg); background-repeat: no-repeat;">&nbsp;</div>
</div>
<div class="float-left" style="border:#FF0000 1px solid; width:115px; height:24px; margin:10px 0px 0px 20px; background-color:#670404;">                        
    <div class="sl-selected-action">1</div>
    <div class="sl-deselected-action">2</div>
    <div class="sl-deselected-action">3</div>
    <div class="sl-deselected-action" style="border-right:none;">4</div>
    <div class="clearboth" style="display:none;"></div>
</div>
<div class="float-right>I am here<img src="http://119.148.6.44/Images/blank.png" alt="Pause" title="Pause" class="sl-pause-button" /></div>
<div class="clear"></div>

<div id="divHidenImageContainer" style="display:none;">
    <img src="/Content/Images/Slider1.jpg" alt="Alt for first (0) image" title="Title for first (0) image" />
    <img src="/Content/Images/Slider2.JPG" alt="Alt for first (1) image" title="Title for first (1) image" />
    <img src="/Content/Images/Slider3.JPG" alt="Alt for first (2) image" title="Title for first (2) image" />
    <img src="/Content/Images/Slider4.JPG" alt="Alt for first (3) image" title="Title for first (3) image" />                    
</div>

